<template>
    <div class="section-3">
        <div class="container">
            <div class="title">
                <h2>头部结构细节要求</h2>
            </div>
            <div class="flex-grow">
                <div class="flex-item">
                    <div class="shadow" @mouseenter="showActive(1)" @mouseleave="showActive(0)">
                        <div class="bear hover-bear">
                            <transition name="fade">
                                <img src="./images/bear-mouth-hover.gif" v-show="active === 1" transiton="fade">
                            </transition>
                        </div>
                        <div class="bear line-bear">
                            <transition name="fade">
                                <img src="./images/bear-mouth.png" v-show="active != 1" transiton="fade">
                            </transition>
                        </div>
                        <h5>嘴部</h5>
                        <div>
                            <transition name="fade" v-if="!isWap">
                                <p v-show="active === 1" transiton="fade">从结构上配合传动装置实现嘴部的张开及闭合，同时要考虑其咬合力可抓稳配套的互动小球。</p>
                            </transition>
                            <p class="wap" v-else>从结构上配合传动装置实现嘴部的张开及闭合，同时要考虑其咬合力可抓稳配套的互动小球。</p>
                        </div>
                    </div>
                </div>
                <div class="flex-item">
                    <div class="shadow" @mouseenter="showActive(2)" @mouseleave="showActive(0)">
                        <div class="bear hover-bear">
                            <transition name="fade">
                                <img src="./images/bear-ear-hover.gif" v-show="active === 2" transiton="fade">
                            </transition>
                        </div>
                        <div class="bear line-bear">
                            <transition name="fade">
                                <img src="./images/bear-ear.png" v-show="active != 2" transiton="fade">
                            </transition>
                        </div>
                        <h5>耳朵</h5>
                        <div>
                            <transition name="fade" v-if="!isWap">
                                <p v-show="active === 2" transiton="fade">从结构上配合微型传动装置实现耳朵部位的轻微摆动。</p>
                            </transition>
                            <p v-else>从结构上配合微型传动装置实现耳朵部位的轻微摆动。</p>
                        </div>
                    </div>
                </div>
                <div class="flex-item">
                    <div class="shadow" @mouseenter="showActive(3)" @mouseleave="showActive(0)">
                        <div class="bear hover-bear">
                            <transition name="fade">
                                <img src="./images/bear-eye-hover.gif" v-show="active === 3" transiton="fade">
                            </transition>
                        </div>
                        <div class="bear line-bear">
                            <transition name="fade">
                                <img src="./images/bear-eye.png" v-show="active != 3" transiton="fade">
                            </transition>
                        </div>
                        <h5>眼珠</h5>
                        <div>
                            <transition name="fade" v-if="!isWap">
                                <p v-show="active === 3" transiton="fade">从结构上配合微型传动装置实现眼部眼珠的360度全向转动，同时要考虑不影响其内层的深度摄像头的稳定工作。</p>
                            </transition>
                            <p v-else>从结构上配合微型传动装置实现眼部眼珠的360度全向转动，同时要考虑不影响其内层的深度摄像头的稳定工作。</p>
                        </div>
                    </div>
                </div>
                <div class="flex-item">
                    <div class="shadow" @mouseenter="showActive(4)" @mouseleave="showActive(0)">
                        <div class="bear hover-bear">
                            <transition name="fade">
                                <img src="./images/bear-eyelid-hover.gif" v-show="active === 4" transiton="fade">
                            </transition>
                        </div>
                        <div class="bear line-bear">
                            <transition name="fade">
                                <img src="./images/bear-eyelid.png" v-show="active != 4" transiton="fade">
                            </transition>
                        </div>
                        <h5>眼皮</h5>
                        <div>
                            <transition name="fade" v-if="!isWap">
                                <p v-show="active === 4" transiton="fade">从结构上配合微型传动装置实现眼部眼皮的上下闭合与开启，同时要考虑不影响其内层的深度摄像头的稳定工作。</p>
                            </transition>
                            <p v-else>从结构上配合微型传动装置实现眼部眼皮的上下闭合与开启，同时要考虑不影响其内层的深度摄像头的稳定工作。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            active: 0,
            isWap: false
        }
    },
    mounted(){
        if($(window).width()<768){
            this.isWap = true;
        }
    },
    methods:{
        showActive(index) {
            this.active = index;
        }
    }
}
</script>

<style lang="less" scoped>
.section-3{
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 80vh;
    background: url(./images/section-3.png) no-repeat center center;
    background-size: cover;
    .title{
        text-align: center;
        padding:75px 0 60px 0;
        h2{
            font-size:30px;
            color:#fff;
            line-height:25px;
        }
    }
    .flex-grow{
        padding-bottom:100px;
        .flex-item{
            .shadow{
                max-width:98%;
                height:490px;
                margin:auto;
                cursor: pointer;
                color:#FFFFFF;
                padding: 275px 30px 30px 30px;
                position: relative;
                .bear{
                    width:186px;
                    height:186px;
                    position: absolute;
                    top:50px;
                    left:50%;
                    transform: translateX(-50%);
                }
                h5{
                    font-size:20px;
                    text-align:center;
                    margin-bottom:40px;
                }
                p{
                    text-align: justify;
                    vertical-align: top;
                }
                &:hover{
                    background:#1B1B1B;
                }
            }
        }
    }
}
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}
.fade-enter, .fade-leave-active {
    opacity: 0
}
</style>
